<template>
  <el-dialog
    top="30px"
    width="1000px"
    append-to-body
    title="操作记录"
    class="dialog-sm"
    :visible.sync="visible"
    :close-on-click-modal="false"
    :before-close="beforeClose"
  >
    <el-form :inline="true">
      <el-form-item>
        <el-input
          placeholder="档案编号"
          @keyup.enter.native="getData()"
          @clear="getData()"
          clearable
          size="small"
          class="search-sw"
          v-model="params.register_no"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-input
          placeholder="档案柜号"
          @keyup.enter.native="getData()"
          @clear="getData()"
          clearable
          size="small"
          class="search-sw"
          v-model="params.register_cabinet_no"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="selectedDate"
          placeholder="操作日期"
          type="date"
          value-format="yyyy-MM-dd"
          size="small"
          class="search-sw"
          clearable
          @change="handleDateChange"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="small" @click="getData()">查询</el-button>
      </el-form-item>
    </el-form>

    <div v-loading="loading">
      <table class="table table-bordered table-sm" v-for="item in tableData" :key="item.id">
        <colgroup>
          <col width="20%" />
          <col width="30%" />
          <col width="20%" />
          <col width="30%" />
        </colgroup>
        <tbody>
          <tr>
            <td colspan="4" class="bg-light text-center font-weight-bold">
              {{ item.typeLabel }}登记
            </td>
          </tr>
          <tr>
            <td class="bg-light">档案编号</td>
            <td>{{ item.register_no }}</td>
            <td class="bg-light">档案柜号</td>
            <td>{{ item.register_cabinet_no }}</td>
          </tr>
          <tr>
            <td class="bg-light">档案名称</td>
            <td>{{ archiveName }}</td>
            <td class="bg-light">附件数量</td>
            <td>{{ item.register_attachment_count }}</td>
          </tr>
          <tr>
            <td class="bg-light">{{ item.typeLabel }}人</td>
            <td>{{ item.lend_person }}</td>
            <td class="bg-light">{{ item.typeLabel }}时间</td>
            <td>{{ item.lend_time }}</td>
          </tr>
          <tr>
            <td class="bg-light">{{ item.typeLabel }}说明</td>
            <td colspan="3">{{ item.lend_des }}</td>
          </tr>
        </tbody>
      </table>

      <div class="empty-wrap mb-3" v-if="!loading && !tableData.length">暂无记录</div>

      <div class="d-flex justify-content-between">
        <div></div>
        <el-pagination
          layout="total, prev, pager, next, jumper"
          :current-page.sync="params.index"
          :page-size="params.size"
          :total="tableCount"
          @current-change="getData"
        ></el-pagination>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { enumHistoryType } from '@/credit/views/city/archives/mixins'

export default {
  components: {},
  props: {
    visible: Boolean,
    formData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      loading: false,
      params: {
        index: 1,
        size: 10,
        register_no: '',
        register_cabinet_no: '',
      },
      order: {
        lend_time: 'desc',
      },
      tableName: 'lend_register',
      tableData: [],
      tableCount: 0,

      selectedDate: '',
    }
  },
  computed: {
    archiveId() {
      return this.formData.project_archives_id
    },
    archiveName() {
      return this.formData.customer_name + '档案'
    },
  },
  watch: {
    visible: {
      handler: function (val) {
        if (!val) {
          return
        }
        const { archiveId } = this
        if (archiveId) {
          this.params['register_id.eq'] = archiveId
          this.getData()
        } else {
          this.tableData = []
          this.tableCount = 0
        }
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },

    getData(index = 1) {
      this.params.index = index
      this.loading = true
      this.$api
        .getData(this.$serviceName, this.tableName, this.params, this.order)
        .then(res => {
          const data = (res && res.data) || {}
          this.tableData = (data.data || []).map(this.dataAdapter)
          this.tableCount = data.totalCount || 0
        })
        .finally(() => {
          this.loading = false
        })
    },

    dataAdapter(item) {
      item.lend_time = (item.lend_time || '').substring(0, 10)
      item.typeLabel = enumHistoryType[item.lend_type] || '-'
      return item
    },

    handleDateChange() {
      if (this.selectedDate) {
        this.params['lend_time.gte'] = this.selectedDate
        this.params['lend_time.lte'] = `${this.selectedDate} 23:59:59`
      } else {
        this.params['lend_time.gte'] = ''
        this.params['lend_time.lte'] = ''
      }
      this.getData()
    },
  },
}
</script>

<style lang="scss" scoped>
.search-sw {
  width: 150px;
}
</style>
